<template>
  <view class="aside-spell" ref="asideSpell">
    <view v-for="(item,index) in firstSpellList" :key="index" 
    @click="anchorLocaltion(item)">
      {{item}}
    </view>
  </view>
</template>

<script>
  import {firstSpell,spellAutoCar} from '@/utils/mock.js'
  import {getCarSpell} from '@/api/parts/car.js'
  let query=uni.createSelectorQuery();
  
  export default {
    data(){
      return{
        firstSpellList:firstSpell,
      }
    },
    computed:{
      getFirstSpellList(){
        getCarSpell().then(res=>{
          return Object.keys(spellAutoCar).sort()
        })
      },
    },
    methods:{
      init(){
        getCarSpell().then(res=>{
          // this.firstSpellList = Object.keys(res.data).sort()
        })
      },
      changeShow(){
        let asideSpell = query.select("aside-spell");
        // asideSpell
        console.log("111",query.select("aside-spell"))
        console.log("this.$refs.asideSpell",this.$refs.asideSpell)
      },
      anchorLocaltion(item){
        // this.$nextTick(()=>{
        //   uni.createSelectorQuery().select(`.vehicle-${item}`).boundingClientRect(data=>{
        //     console.log("data",data)
        //     uni.createSelectorQuery().select(".text-area").boundingClientRect(res=>{
        //     console.log("res",res)
        //       uni.pageScrollTo({
        //             duration: 100,//过渡时间
        //             scrollTop:data.top - 70 - res.top  ,//到达距离顶部的top值
        //       })
        //     }).exec()
        //   }).exec();  
        // })
        this.$emit('anchorLocaltion',item)
      },
    },
    created() {
      // console.log("getFirstSpellList",this.getFirstSpellList())
      // console.log("spellAutoCar",spellAutoCar)
      this.init();
    },
    mounted() {
      this.changeShow()
    },
  }
</script>

<style>
  @import url('../../static/style/aside-spell/aside-spell.css');
</style>